<!doctype html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<head>
	<meta charset="UTF-8">
	<title>我的相册</title>
	<style>
		body{
			background:pink;
		}
		#water li{
			list-style:none;
			float:left;
		}
		#water li div{
			padding:5px;
			margin:2px;
			background:#FFFF0D;
			border-radius:5px;}
		img{
			border:2px solid black;
		}
	</style>
</head>
<body>

</body>
<script>
	var p_width = 110;
	var colnum;
	var timmer;
	window.onload = function(){
		colnum = cols();
		addul(colnum);
		loadpic();
	}
	window.onresize = function(){
		if(cols() != colnum){
			var ul = document.getElementById('water');
			document.body.removeChild(ul);

			colnum = cols();

			addul(colnum);

			loadpic();
		}
	}

	window.onscroll = function(){
		//为了避免多次执行我们的记载动作
		if(timmer){
			clearTimeout(timmer);
			timmer = undefined;
		}


		timmer = setTimeout(function(){
			//获取三高
			var pinggao = document.documentElement.clientHeight;   //窗口高度
			var gungao = document.documentElement.scrollTop || document.body.scrollTop;
			var wengao = document.documentElement.offsetHeight;

			if(wengao - pinggao - gungao < 200){
				loadpic();
			}
			document.title = 'p:'+pinggao+'g:'+gungao+'w:'+wengao;
		},200);


	}
	//计算列数
	function cols(){
		var width = document.documentElement.clientWidth - 20;

		var num = Math.floor(width/(p_width+35));

		return num;
	}
	//创建ul
	function addul(num){
		var ul = document.createElement('ul');
		ul.id = "water";
		for(var i = 0;i<num;i++){
			var li = document.createElement('li');
			ul.appendChild(li);
		}
		document.body.appendChild(ul);
	}
	//加载图片
	function loadpic(){
		var ajax = getajax();
		ajax.open('GET','__CONTROLLER__/loadpic',true);
		ajax.send();
		ajax.onreadystatechange = function (){
			if(ajax.readyState == 4 && ajax.status == 200){
				progress(ajax.responseText);
			}
		}
	}
	function progress(json){
		var obj = eval('('+json+')');
		//alert(obj);
		for(i = 0;i<obj.length;i++){
			var img = obj[i];


			var ul = document.getElementById('water');
			var lis = ul.children;

			var div = document.createElement("div");
			div.innerHTML = '<img src="__PUBLIC__/mypic/'+img+'" width="'+p_width+'"/>';

			//lis[0].appendChild(div);
			var mask = -1;
			for(var j=0;j<lis.length;j++){
				var height = lis[j].offsetHeight;
				if(mask == -1 || height < mask){
					mask = height;
					var sli = lis[j];
					sli.appendChild(div);
				}
			}

		}
	}
	function getajax(){
		var ajax;
		if(window.XMLHttpRequest){
			ajax = new XMLHttpRequest();
		}else{
			ajax = new ActiveXObject('Microsoft.XMLHTTP');
		}
		return ajax;
	}

</script>
</html>